<template>
  <div class="guide-shade" v-if="show">

    <div class="wrap" :style="{'line-height':h,'height':h,'width':w}">

      <div class="guide-body">
        <div>
          <div class="guide-title">—————  需认证身份  —————</div>
          <div class="guide-img"></div>
          <div class="guide-content">为确保交易安全</div>
          <div class="guide-content">通过实名认证后才可发起私信</div>
        </div>

        <div class="guide-foot">
          <div class="btn-cancel" @click="close">下次再说</div>
          <div class="btn-confirm" @click="goAuth">去认证</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default{
    props: ['show'],
    data(){
      return {
        h: document.body.clientWidth  + 'px',
        w: document.body.clientWidth  + 'px',
      }
    },
    components: {},

    watch: {},

    methods: {
      close: function () {
        this.show = false;
      },

      goAuth: function () {
        this.$dispatch('go-auth');
        this.show = false;
      }

    }

  }
</script>

<style scoped>
  .wrap {
    top: 25%;
    position: absolute;
    text-align: center;
    z-index: 202;
  }

  .guide-shade {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 1;
    z-index: 200;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    background: rgba(0, 0, 0, 0.4);
  }

  .guide-body {
    position: relative;
    transition: width 0.2s;
    background: #fafafa;
    display: inline-block;
    -webkit-transition: height 0.2s;
    line-height: 1;
    width: 280px;
  }

  .guide-body > div {
    text-align: center;
    opacity: 1;
    transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
  }

  .guide-title {
    padding-top: 25px;
    padding-bottom: 10px;
    font-size: 15px;
    color: #141414;
  }

  .guide-img {
    background-image: url(../../static/img/ic_communion.png);
    height: 110px;
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .guide-content {
    font-size: 15px;
    color: #141414;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .guide-foot {
    margin-top: 10px;
    width: 100%;
    background: #fafafa;
    border-top: solid;
    border-width: 1px;
    border-color: #969696;
    display: -moz-box;
    display: -webkit-box;
  }

  .btn-cancel {
    height: 40px;
    line-height: 40px;
    -webkit-box-flex: 1;
    background: #fafafa;
    color: #969696;
  }

  .btn-confirm {
    height: 40px;
    line-height: 40px;
    -webkit-box-flex: 1;
    background: #fe6b0e;
    color: #fff;
  }

</style>
